<script lang="tsx">
import { defineComponent } from 'vue'
import { ElFormItem, ElCol } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { ColProps } from '@/types/components'

const setGridProp = (col: ColProps = {}): ColProps => {
  const colProps: ColProps = {
    // 如果有span，代表用户优先级更高，所以不需要默认栅格
    ...(col.span
      ? {}
      : {
          xs: 24,
          sm: 12
        }),
    ...col
  }
  return colProps
}

export default defineComponent({
  name: 'FormItem',
  props: {
    colProps: propTypes.object.def({}),
    labelWidth: propTypes.oneOfType([String, Number]).def('100px'),
    label: propTypes.string.def(''),
    prop: propTypes.string
  },

  setup(props, { slots }) {
    return () => (
      <ElCol {...setGridProp(props.colProps)}>
        <ElFormItem label={props.label} prop={props.prop} labelWidth={props.labelWidth}>
          {slots.default && slots.default()}
        </ElFormItem>
      </ElCol>
    )
  }
})
</script>

<style lang="less" scoped>
.@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
</style>
